<%@ page contentType="text/html" pageEncoding="UTF-8" %>
<%@ page import="gem.apps.fs.web.style.StyleFactory" %>
<%@ page import="gem.apps.fs.web.style.Style" %>
<%
/*
 *  Copyright (c) 2010 Peter Lényi
 *  Licensed under The BSD License
 *
 * @author  Peter Lényi
 * @version 20100426F
 */
%>
<%
    StyleFactory styleFactory = StyleFactory.getInstance();
    pageContext.setAttribute("style", styleFactory.getStyle());
%>
<style type="text/css">
    body {
        background-color : ${style.bgcolorPrimary};
        color : ${style.fgcolorPrimary};
        font-family : ${style.fontPrimary};
        font-size : 13px;
        width : 800px;
        margin : 0em auto;
        border : 0px none;
        padding : 0em;
    }

    p {
        line-height : 125%;
        margin : 0.25em 0em 0em 0em;
    }

    a {
    }

    a:link {
        color : ${style.htcolorPrimary};
        text-decoration : underline;
    }
    
    a:visited {
        color : ${style.htcolorTernary};
        text-decoration : none;
    }

    a:hover {
        color : ${style.htcolorSecondary};
        text-decoration : none;
    }

    a:active {
        color : ${style.htcolorSecondary};
        text-decoration : underline;
    }

    h1 {
        font-size : 3em;
        text-transform : uppercase;
        margin : 0em 0em 0em 0em;
    }

    h2 {
        font-size : 1.5em;
        margin : 0.25em 0em 0em 0em;
    }

    h3 {
        font-size : 1.5em;
        font-weight : bold;
        text-align : center;
        text-transform : uppercase;
        margin : 0.25em 0em 0em 0em;
    }

    h4 {
        font-size : 1.25em;
        font-weight : bold;
        font-variant : small-caps;
        text-align : center;
        text-transform : capitalize;
        margin : 0.25em 0em 0em 0em;
    }

    h5 {
        font-size : 1.125em;
        font-weight : bold;
        text-indent : 3em;
        text-transform : capitalize;
        margin : 0.25em 0em 0em 0em;
    }

    h6 {
        font-size : 1em;
        font-weight : bold;
        margin : 0.25em 0em 0em 0em;
    }

    img {
        margin : 1em 0em 0em 0em;
        border : none;
        padding : 0em;
    }

    fieldset {
        margin : 1em 0em 0em 0em;
        border-top : 1px solid ${style.lncolorPrimary};
        border-right : none;
        border-bottom : none;
        border-left : 1px solid ${style.lncolorPrimary};
        padding : 0.25em 0em 0.25em 1em;
    }

    fieldset table {
        width : 100%;
    }
    
    fieldset th {
        text-align : right;
        vertical-align : top;
        font-weight : bold;
        width : 15%;
        padding-right : 1em;
    }

    legend {
        font-size : 1.25em;
        font-weight : bold;
        font-variant : small-caps;
        text-transform : capitalize;
    }

    input[type=text] {
        width : 100%;
    }

    textarea {
        width : 100%;
    }

    optgroup {
        background-color : ${style.bgcolorSecondary};
        color : ${style.fgcolorPrimary};
        margin : 0.25em 0em;
    }

    fieldset + input {
        margin-top : 1em;
    }

    dt {
        font-size : 1.125em;
        font-weight : bold;
        text-indent : 0em;
        text-transform : none;
        margin : 0.25em 0em 0em 0em;
        border : none;
        padding : 1em 0em 0em 0em;
    }

    dd + dt {
        border-top : 1px solid ${style.lncolorPrimary};
    }

    dd {
        margin : 0.25em 0em 0em 0em;
    }

    dd ul li {
        display : inline;
        list-style-type : none;
        margin : 0em 0em 0em 1em;
        border : none;
        padding : 0.25em 0em;
    }

    dd ul li:first-child {
        margin : 0em;
    }

    header {
        background-color : ${style.bgcolorSecondary};
        color : ${style.fgcolorSecondary};
        font-family : ${style.fontSecondary};
        display : block;
        margin : 1em 0em 0em 0em;
        border : 1px solid ${style.lncolorSecondary};
        padding : 0.25em 1em;
    }

    header img {
        margin : 0em;
        border : none;
        padding : 0em;
    }

    article header {
        background-color : inherit;
        color : inherit;
        width : 60%;
        margin : 1em auto 0em auto;
        border-top : 1px solid ${style.lncolorPrimary};
        border-right : none;
        border-bottom : none;
        border-left : 1px solid ${style.lncolorPrimary};
    }

    hgroup {
        display : block;
    }

    img#sitelogo {
        float : left;
        width : 64px;
        height : 64px;
        margin : 0em 0em 0em -1em;
    }

    header h1 {
        text-align : right;
    }
    
    nav {
        background-color : ${style.bgcolorSecondary};
        color : ${style.fgcolorSecondary};
        display : block;
        margin : 1px 0em 0em 0em;
        border : 1px solid ${style.lncolorSecondary};
        padding : 0.25em 1em;
    }

    nav ul {
        padding : 0em;
    }

    nav li {
        display : inline;
        list-style-type : none;
        margin : 0em 0em 0em 1em;
        border-top : 1px solid ${style.lncolorSecondary};
        border-right : none;
        border-bottom : none;
        border-left : 1px solid ${style.lncolorSecondary};
        padding : 0.25em 1em;
    }

    nav li:first-child {
        margin : 0em;
    }

    nav li:hover {
        background-color : ${style.bgcolorPrimary};
        color : ${style.fgcolorPrimary};
    }

    aside {
        background-color : ${style.bgcolorSecondary};
        color : ${style.fgcolorSecondary};
        display : block;
        width : 25%;
        
        margin : 1px 1px 0em 0em;
        border : 1px solid ${style.lncolorSecondary};
        padding : 0.25em 0.25em 1em 0.25em;
    }

    section {
        background-color : ${style.bgcolorSecondary};
        color : ${style.fgcolorSecondary};
        display : block;
        margin : 1px 0em 0em 0em;
        border : 1px solid ${style.lncolorSecondary};
        padding : 0.25em 1em 1em 1em;
    }

    article {
        display : block;
    }

    article#err {
        background-color : ${style.bgcolorSecondary};
        color : ${style.fgcolorSecondary};
        display : block;
        margin : 1px 0em 0em 0em;
        border : 1px double ${style.lncolorSecondary};
        padding : 0.25em 1em 1em 1em;
    }

    article nav {
        border : none;
        padding : 0.25em 1em;
    }

    footer {
        background-color : ${style.bgcolorSecondary};
        color : ${style.fgcolorSecondary};
        text-align : center;
        display : block;
        clear : both;
        margin : 1px 0em 1em 0em;
        border : 1px solid ${style.lncolorSecondary};
        padding : 0.25em 1em;
    }

    pre {
        background-color : ${style.bgcolorTernary};
        color : ${style.fgcolorTernary};
        font-family : ${style.fontTernary};
        margin : 0.25em 0em 0em 0em;
        border : ${style.lncolorTernary};
        padding : 0.5em 1em;
    }

    blockquote {
        background-color : ${style.bgcolorTernary};
        color : ${style.fgcolorTernary};
        font-style : italic;
        margin : 0.25em 0em 0em 0em;
        border : ${style.lncolorTernary};
        padding : 0.5em 1em;
    }
</style>